{% extends 'base.html' %}
{% load static %}


{% block css %}
    <link href="{% static 'plugin/cropper-master/dist/cropper.css' %}" rel="stylesheet">

    <style>
        /*首先画个圆形*/
        .circle {
            width: 130px;
            height: 130px;
            border-radius: 50%;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            /*水平居中*/
            margin: 25px auto 25px auto;
            /*作用于子标签*/
            overflow: hidden;
            position: relative;
            text-align: center;
        }

        /*上传文件样式*/
        .uploadhead {
            position: absolute;
            bottom: 0;
            width: 130px;
            height: 35px;
            background-color: #000;
            opacity: 0.7;
            color: #fff;
            font-size: 14px;
            line-height: 30px;
            display: none;
        }

        /*经过头像显示上传文字*/
        .circle:hover .uploadhead {
            display: block;
            color: #fff;
        }

        /*隐藏Input上传按钮*/
        .uploadhead input {
            position: absolute;
            top: 0;
            opacity: 0;
        }

        img {
            max-width: 100%; /* This rule is very important, please do not ignore this! */
        }
    </style>


{% endblock %}


{% block content %}

    <div class="py-4">
        <div class="container" style="margin-top: 50px">
            <div class="row">
                <!-- Main Content -->
                <aside class="col col-xl-3 order-xl-1 col-lg-12 order-lg-1 col-12">
                    <div class="box mb-3 shadow-sm border rounded bg-white profile-box text-center">
                        <div class="py-4 px-3 border-bottom">
                            <div class="circle">
                                <img id="avatar" src="{{ user_profile.avatar.url }}"
                                     class="img-fluid mt-2 rounded-circle"
                                     alt="Responsive image" style="width: 100%">
                                {% if user_profile == request.universe.user %}
                                    <a href="javascript:" class="uploadhead">
                                        <input type="file" name="file" onchange="preview(this)">上传头像
                                    </a>
                                {% endif %}
                            </div>
                            <h5 class="font-weight-bold text-dark mb-1 mt-4">{{ user_profile.username }}</h5>
                            <p class="mb-0 text-muted">{{ user_profile.motto }}</p>
                        </div>
                        <div class="d-flex">
                            <div class="col-6 border-right p-3">
                                <h6 class="font-weight-bold text-dark mb-1">358</h6>
                                <p class="mb-0 text-black-50 small">Connections</p>
                            </div>
                            <div class="col-6 p-3">
                                <h6 class="font-weight-bold text-dark mb-1">85</h6>
                                <p class="mb-0 text-black-50 small">Views</p>
                            </div>
                        </div>
                        <div class="overflow-hidden border-top">
                            <a class="font-weight-bold p-3 d-block" href="sign-in.html"> Log Out </a>
                        </div>
                    </div>
                    <div class="box shadow-sm border rounded bg-white mb-3">
                        <div class="box-title border-bottom p-3">
                            <h6 class="m-0">Skills & Endorsements</h6>
                        </div>
                        <div class="box-body">
                            <div class="d-flex align-items-center osahan-post-header p-3 border-bottom people-list">
                                <div class="dropdown-list-image mr-3">
                                    <img class="rounded-circle" src="{% static 'img/l4.png' %}" alt="">
                                </div>
                                <div class="font-weight-bold">
                                    <div class="text-truncate">Character Concept <span
                                            class="badge badge-dark ml-1">1</span></div>
                                    <div class="small text-muted"><span class="text-primary">You and 1 connection</span>
                                        have given endorsements for this skill
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex align-items-center osahan-post-header p-3 border-bottom people-list">
                                <div class="dropdown-list-image mr-3">
                                    <img class="rounded-circle" src="{% static 'img/l8.png' %}" alt="">
                                </div>
                                <div class="font-weight-bold">
                                    <div class="text-truncate">Digital Painting <span
                                            class="badge badge-danger ml-1">6</span></div>
                                    <div class="small text-muted"><span class="text-primary">Ask</span> has given an
                                        endorsement for this skill
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex align-items-center osahan-post-header p-3 people-list">
                                <div class="dropdown-list-image mr-3">
                                    <img class="rounded-circle" src="{% static 'img/l5.png' %}" alt="">
                                </div>
                                <div class="font-weight-bold">
                                    <div class="text-truncate">Adobe Photoshop <span
                                            class="badge badge-info ml-1">3</span>
                                    </div>
                                    <div class="small text-muted"><span class="text-primary">Julia Cox</span> has given
                                        an
                                        endorsement for this skill
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="box shadow-sm mb-3 rounded bg-white ads-box text-center">
                        <img src="{% static 'img/job1.png' %}" class="img-fluid" alt="Responsive image">
                        <div class="p-3 border-bottom">
                            <h6 class="font-weight-bold text-dark">Osahan Solutions</h6>
                            <p class="mb-0 text-muted">Looking for talent?</p>
                        </div>
                        <div class="p-3">
                            <button type="button" class="btn btn-outline-primary pl-4 pr-4"> POST A JOB</button>
                        </div>
                    </div>
                </aside>
                <main class="col col-xl-6 order-xl-2 col-lg-12 order-lg-2 col-md-12 col-sm-12 col-12">
                    <div class="box shadow-sm border rounded bg-white mb-3">
                        <div class="box-title border-bottom p-3">
                            <h6 class="m-0">个人简介</h6>
                        </div>
                        <div class="box-body p-3">
                           {{ user_profile.intro }}
                        </div>
                    </div>
                    <div class="box shadow-sm border rounded bg-white mb-3">
                        <div class="box-title border-bottom p-3">
                            <h6 class="m-0">Experience</h6>
                        </div>
                        <div class="box-body p-3 border-bottom">
                            <div class="d-flex align-items-top job-item-header pb-2">
                                <div class="mr-2">
                                    <h6 class="font-weight-bold text-dark mb-0">Web designer</h6>
                                    <div class="text-truncate text-primary">Spotify Inc.</div>
                                    <div class="small text-gray-500">Oct 2020 - Present (4 year 7 month)</div>
                                </div>
                                <img class="img-fluid ml-auto mb-auto" src="{% static 'img/l3.png' %}" alt="">
                            </div>
                            <p class="mb-0">Find the most qualified people in the most unexpected places. Information
                                for
                                applicants to consider when applying for local positions. </p>
                        </div>
                        <div class="box-body p-3 border-bottom">
                            <div class="d-flex align-items-top job-item-header pb-2">
                                <div class="mr-2">
                                    <h6 class="font-weight-bold text-dark mb-0">Cloud Software Engineer</h6>
                                    <div class="text-truncate text-primary">Spotify Inc.</div>
                                    <div class="small text-gray-500">Oct 2020 - Present (4 year 7 month)</div>
                                </div>
                                <img class="img-fluid ml-auto mb-auto" src="{% static 'img/l6.png' %}" alt="">
                            </div>
                            <p class="mb-0">Find the most qualified people in the most unexpected places. Information
                                for.. </p>
                        </div>
                        <div class="box-body p-3">
                            <div class="d-flex align-items-top job-item-header pb-2">
                                <div class="mr-2">
                                    <h6 class="font-weight-bold text-dark mb-0">UI/UX designer</h6>
                                    <div class="text-truncate text-primary">Behance</div>
                                    <div class="small text-gray-500">Oct 2020 - Present (4 year 7 month)</div>
                                </div>
                                <img class="img-fluid ml-auto mb-auto" src="{% static 'img/l2.png' %}" alt="">
                            </div>
                            <p class="mb-0">Wualified people in the most unexpected places. Information for applicants
                                to
                                consider when applying for local positions. The largest community on the web to find and
                                list jobs that aren't restricted by commutes or a specific location.
                            </p>
                        </div>
                    </div>
                    <div class="box shadow-sm border rounded bg-white mb-3">
                        <div class="box-title border-bottom p-3">
                            <h6 class="m-0">Education</h6>
                        </div>
                        <div class="box-body p-3 border-bottom">
                            <div class="d-flex align-items-top job-item-header pb-2">
                                <div class="mr-2">
                                    <h6 class="font-weight-bold text-dark mb-0">Stanford University</h6>
                                    <div class="text-truncate text-primary">Master’s programmes</div>
                                    <div class="small text-gray-500">Oct 2020 - Present (4 year 7 month)</div>
                                </div>
                                <img class="img-fluid ml-auto mb-auto" src="{% static 'img/e1.png' %}" alt="">
                            </div>
                            <p class="mb-0">Find the most qualified people in the most unexpected places. Information
                                for
                                applicants to consider when applying for local positions.</p>
                        </div>
                        <div class="box-body p-3">
                            <div class="d-flex align-items-top job-item-header pb-2">
                                <div class="mr-2">
                                    <h6 class="font-weight-bold text-dark mb-0">Harvard University</h6>
                                    <div class="text-truncate text-primary">Maths and science education</div>
                                    <div class="small text-gray-500">Oct 2020 - Present (4 year 7 month)</div>
                                </div>
                                <img class="img-fluid ml-auto mb-auto" src="{% static 'img/e2.png' %}" alt="">
                            </div>
                            <p class="mb-0">Wualified people in the most unexpected places. Information for applicants
                                to
                                consider when applying for local positions.</p>
                        </div>
                    </div>
                </main>
                <aside class="col col-xl-3 order-xl-3 col-lg-12 order-lg-3 col-12">
                    <div class="box shadow-sm border rounded bg-white mb-3">
                        <div class="box-title border-bottom p-3">
                            <h6 class="m-0">Who viewed your profile</h6>
                        </div>
                        <div class="box-body p-3">
                            <div class="d-flex align-items-center osahan-post-header mb-3 people-list">
                                <div class="dropdown-list-image mr-3">
                                    <img class="rounded-circle" src="{% static 'img/p4.png' %}" alt="">
                                    <div class="status-indicator bg-success"></div>
                                </div>
                                <div class="font-weight-bold mr-2">
                                    <div class="text-truncate">Sophia Lee</div>
                                    <div class="small text-gray-500">@Harvard
                                    </div>
                                </div>
                                <span class="ml-auto"><button type="button"
                                                              class="btn btn-light btn-sm">Connent</button>
                           </span>
                            </div>
                            <div class="d-flex align-items-center osahan-post-header mb-3 people-list">
                                <div class="dropdown-list-image mr-3">
                                    <img class="rounded-circle" src="{% static 'img/p9.png' %}" alt="">
                                    <div class="status-indicator bg-success"></div>
                                </div>
                                <div class="font-weight-bold mr-2">
                                    <div class="text-truncate">John Doe</div>
                                    <div class="small text-gray-500">Traveler
                                    </div>
                                </div>
                                <span class="ml-auto"><button type="button"
                                                              class="btn btn-light btn-sm">Connent</button>
                           </span>
                            </div>
                            <div class="d-flex align-items-center osahan-post-header mb-3 people-list">
                                <div class="dropdown-list-image mr-3">
                                    <img class="rounded-circle" src="{% static 'img/p10.png' %}" alt="">
                                    <div class="status-indicator bg-success"></div>
                                </div>
                                <div class="font-weight-bold mr-2">
                                    <div class="text-truncate">Julia Cox</div>
                                    <div class="small text-gray-500">Art Designer
                                    </div>
                                </div>
                                <span class="ml-auto"><button type="button"
                                                              class="btn btn-light btn-sm">Connent</button>
                           </span>
                            </div>
                            <div class="d-flex align-items-center osahan-post-header mb-3 people-list">
                                <div class="dropdown-list-image mr-3">
                                    <img class="rounded-circle" src="{% static 'img/p11.png' %}" alt="">
                                    <div class="status-indicator bg-success"></div>
                                </div>
                                <div class="font-weight-bold mr-2">
                                    <div class="text-truncate">Robert Cook</div>
                                    <div class="small text-gray-500">@Photography
                                    </div>
                                </div>
                                <span class="ml-auto"><button type="button"
                                                              class="btn btn-light btn-sm">Connent</button>
                           </span>
                            </div>
                            <div class="d-flex align-items-center osahan-post-header people-list">
                                <div class="dropdown-list-image mr-3">
                                    <img class="rounded-circle" src="{% static 'img/p12.png' %}" alt="">
                                    <div class="status-indicator bg-success"></div>
                                </div>
                                <div class="font-weight-bold mr-2">
                                    <div class="text-truncate">Richard Bell</div>
                                    <div class="small text-gray-500">@Envato
                                    </div>
                                </div>
                                <span class="ml-auto"><button type="button"
                                                              class="btn btn-light btn-sm">Connent</button>
                           </span>
                            </div>
                        </div>
                    </div>
                    <div class="box shadow-sm mb-3 rounded bg-white ads-box text-center">
                        <img src="{% static 'img/ads1.png' %}" class="img-fluid" alt="Responsive image">
                        <div class="p-3 border-bottom">
                            <h6 class="font-weight-bold text-gold">Osahanin Premium</h6>
                            <p class="mb-0 text-muted">Grow &amp; nurture your network</p>
                        </div>
                        <div class="p-3">
                            <button type="button" class="btn btn-outline-gold pl-4 pr-4"> ACTIVATE</button>
                        </div>
                    </div>
                    <a href="job-profile.html">
                        <div class="shadow-sm border rounded bg-white job-item mb-3">
                            <div class="d-flex align-items-center p-3 job-item-header">
                                <div class="overflow-hidden mr-2">
                                    <h6 class="font-weight-bold text-dark mb-0 text-truncate">Product Director</h6>
                                    <div class="text-truncate text-primary">Spotify Inc.</div>
                                    <div class="small text-gray-500"><i class="feather-map-pin"></i> India, Punjab</div>
                                </div>
                                <img class="img-fluid ml-auto" src="{% static 'img/l3.png' %}" alt="">
                            </div>
                            <div class="d-flex align-items-center p-3 border-top border-bottom job-item-body">
                                <div class="overlap-rounded-circle">
                                    <img class="rounded-circle shadow-sm" data-toggle="tooltip" data-placement="top"
                                         title="" src="{% static 'img/p9.png' %}" alt=""
                                         data-original-title="Sophia Lee">
                                    <img class="rounded-circle shadow-sm" data-toggle="tooltip" data-placement="top"
                                         title="" src="{% static 'img/p10.png' %}" alt=""
                                         data-original-title="John Doe">
                                    <img class="rounded-circle shadow-sm" data-toggle="tooltip" data-placement="top"
                                         title="" src="{% static 'img/p11.png' %}" alt=""
                                         data-original-title="Julia Cox">
                                    <img class="rounded-circle shadow-sm" data-toggle="tooltip" data-placement="top"
                                         title="" src="{% static 'img/p10.png' %}" alt=""
                                         data-original-title="John Doe">
                                    <img class="rounded-circle shadow-sm" data-toggle="tooltip" data-placement="top"
                                         title="" src="{% static 'img/p11.png' %}" alt=""
                                         data-original-title="Julia Cox">
                                    <img class="rounded-circle shadow-sm" data-toggle="tooltip" data-placement="top"
                                         title="" src="{% static 'img/p12.png' %}" alt=""
                                         data-original-title="Robert Cook">
                                </div>
                                <span class="font-weight-bold text-muted">18 connections</span>
                            </div>
                            <div class="p-3 job-item-footer">
                                <small class="text-gray-500"><i class="feather-clock"></i> Posted 3 Days ago</small>
                            </div>
                        </div>
                    </a>
                    <a href="job-profile.html">
                        <div class="shadow-sm border rounded bg-white job-item mb-3">
                            <div class="d-flex align-items-center p-3 job-item-header">
                                <div class="overflow-hidden mr-2">
                                    <h6 class="font-weight-bold text-dark mb-0 text-truncate">.NET Developer</h6>
                                    <div class="text-truncate text-primary">Invision</div>
                                    <div class="small text-gray-500"><i class="feather-map-pin"></i> London, UK
                                    </div>
                                </div>
                                <img class="img-fluid ml-auto" src="{% static 'img/l4.png' %}" alt="">
                            </div>
                            <div class="d-flex align-items-center p-3 border-top border-bottom job-item-body">
                                <div class="overlap-rounded-circle">
                                    <img class="rounded-circle shadow-sm" data-toggle="tooltip" data-placement="top"
                                         title="" src="{% static 'img/p13.png' %}" alt=""
                                         data-original-title="Sophia Lee">
                                    <img class="rounded-circle shadow-sm" data-toggle="tooltip" data-placement="top"
                                         title="" src="{% static 'img/p1.png' %}" alt="" data-original-title="John Doe">
                                    <img class="rounded-circle shadow-sm" data-toggle="tooltip" data-placement="top"
                                         title="" src="{% static 'img/p2.png' %}" alt=""
                                         data-original-title="Julia Cox">
                                    <img class="rounded-circle shadow-sm" data-toggle="tooltip" data-placement="top"
                                         title="" src="{% static 'img/p3.png' %}" alt=""
                                         data-original-title="Robert Cook">
                                </div>
                                <span class="font-weight-bold text-muted">18 connections</span>
                            </div>
                            <div class="p-3 job-item-footer">
                                <small class="text-gray-500"><i class="feather-clock"></i> Posted 3 Days ago</small>
                            </div>
                        </div>
                    </a>
                </aside>
            </div>
        </div>
    </div>


    <!-- 裁剪图片Modal -->
    <div class="modal fade" id="changeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">请选择合适的区域作为头像</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    <div class="img-container">
                        <img id="uploadPreview" src="">
                    </div>
                    <div id="error_text" style="display:none"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button id='sendPhoto' type="button" class="btn btn-primary">上传头像</button>
                </div>
            </div>
        </div>
    </div>




{% endblock %}

{% block js %}
    <script src="{% static 'plugin/cropper-master/dist/cropper.js' %}"></script>
    <script src="{% static 'csrf.js' %}"></script>

    <script type="text/javascript">

        function preview(obj) {
            var _alertMsg = document.getElementById('error_text');
            var _myModalLabel = document.getElementById("myModalLabel");

            //此事件在模态框被隐藏（并且同时在 CSS 过渡效果完成）之后被触发。
            $('#changeModal').modal('show').on('hidden.bs.modal', function (e) {
                //关闭模态对话框后清空file input的值
                $(obj).val('');
                //隐藏错误提示
                _alertMsg.style.display = 'none';
                //清空图片信息
                document.getElementById("uploadPreview").src = '';
                $("#uploadPreview").cropper('reset').cropper('replace', '');
                //摧毁cropper
                $("#uploadPreview").cropper("destroy");
                //解绑changeModal的所有事件
                $('#changeModal').off('shown.bs.modal');
                $('#changeModal').off('hidden.bs.modal');
            });

            var val = obj.value;
            //设定可上传的格式
            var upLoadType = '.jpg,.jpeg,.gif,.bmp,.png';
            //从字符串中抽出最后一次出现.之后的字符，并且转换成小写
            var fileExt = val.substr(val.lastIndexOf(".")).toLowerCase();
            //查找后缀名是否符合条件，如果符合返回>=0，如果不符合则返回负数;
            var result = upLoadType.indexOf(fileExt);
            //如果只有一个文件则只需要访问这个FileList对象中的第一个元素.
            var oFile = obj.files[0];
            //文件不存在直接返回或者不符合格式
            if (obj.files.length === 0 || result < 0) {
                _alertMsg.innerHTML = "请输入正确格式:" + upLoadType;
                _alertMsg.style.display = 'inline-block';
                _myModalLabel.innerHTML = "上传出现错误";
                //隐藏图片容器
                document.getElementById("uploadPreview").parentElement.style.display = 'none';
                return;
            }
            ;
            if (oFile.size / 1024 > 1024) {
                _alertMsg.innerHTML = "请上传1M内的文件";
                _alertMsg.style.display = 'inline-block';
                _myModalLabel.innerHTML = "上传出现错误";
                //隐藏图片容器
                document.getElementById("uploadPreview").parentElement.style.display = 'none';
                return;
            }
            ;

            //model显示并在CSS过渡完成回调
            $('#changeModal').on('shown.bs.modal', function () {
                //转为基于file API的Blob对象
                var blobURL;
                //URL对象是硬盘（SD卡等）指向文件的一个路径
                var URL = window.URL || window.webkitURL;
                //获得一个http格式的url路径
                blobURL = URL.createObjectURL(oFile);
                document.getElementById("uploadPreview").parentElement.style.display = 'block';
                document.getElementById("uploadPreview").src = blobURL;

                //绑定cropper插件
                $("#uploadPreview").cropper({
                    aspectRatio: 1 / 1, //1比1
                    viewMode: 1,
                    scalable: true,
                    zoomOnWheel: true, //禁止缩放原图
                    zoomOnTouch: false, //禁止缩放原图
                    minContainerWidth: 200,
                    minContainerHeight: 200,
                    ready: function (data) {
                        // Output the result data for cropping image.
                        // And then
                    }
                });
                //重置cropper设置并替换生成的cropper图片url
                $("#uploadPreview").cropper('reset').cropper('replace', blobURL);
                _myModalLabel.innerHTML = "请选择合适的区域作为头像";
            });
        };


        $('#sendPhoto').on('click', function () {
            {#var username = document.getElementById('username').innerHTML.trim();#}
            // cropper可以得到两种裁剪后图片的数据（即blob和dataURL）,dataURL过于长，此处用toBlob
            var photo = $("#uploadPreview").cropper('getCroppedCanvas', {
                width: 200,
                height: 200,
            }).toBlob(function (blob) {
                //因为上传的是文件不是string类型，因此用到H5的FormData方法
                //组装formdata
                var fd = new FormData();
                {#fd.append('username', 'hello');#}
                fd.append("fileName", "avatar"); // fileName为自定义，名字随机生成或者写死，看需求
                fd.append("avatar", blob); //fileData为自定义,blob包含图片的各种信息
                fd.append("key", "avatar");
                fd.append('csrfmiddlewaretoken', '{{ csrf_token }}')
                //ajax上传，ajax的形式随意，JQ的写法也没有问题
                //需要注意的是服务端需要设定，允许跨域请求。数据接收的方式和<input type="file"/> 上传的文件没有区别
                $.ajax({
                    url: '{% url 'updata_avatar' %}',
                    type: 'post',
                    dataType: "json",
                    data: fd,
                    timeout: 60000,//60sec
                    async: true,//default true
                    processData: false, //不设置Content-Type请求头
                    contentType: false, //不处理发送的数据
                    success: function (e) {
                        var avaterurl = e.data;
                        $("#avatar").attr("src", avaterurl);
                        $('#changeModal').modal('hide');
                    }, error: function () {
                        console.log("保存失败");
                    }
                });
            });
        });
    </script>


{% endblock %}

